<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<polymer-element name="cr-webcam">
    <template>
        <style>
            :host {
                display: -webkit-flex;
                display: flex;
            }

            video {
                margin: 0;
                padding: 0;
                display: -webkit-flex;
                display: flex;
                flex: 1;
            }
        </style>
        <video id="video" autoplay></video>
    </template>
    <script>
        Polymer({
            created: function() {
                this.stream = null;
                this.rawStream = null;
                this.active = false;
                this.videoWidth = 0;
                this.videoHeight = 0;
            },
            stop: function() {
                URL.revokeObjectURL(this.$.video.src);
                if (this.rawStream)
                    this.rawStream.stop();
                this.rawStream = null;
                this.stream = null;
                this.videoWidth = 0;
                this.videoHeight = 0;
            },
            start: function() {
                if (this.stream)
                    return this.stream;
                this.stream = this.openStream()
                    .then(this.connectStream.bind(this))
                    .catch(function(e) {
                        // TODO(esprehn): Show an error message.
                        console.log(e);
                    });
                return this.stream;
            },
            attached: function() {
                this.active = true;
                this.start();
            },
            detached: function() {
                this.active = false;
                this.stop();
            },
            openStream: function() {
                var self = this;
                this.$.video.style.visibility = "hidden";
                return new Promise(function(resolve, reject) {
                    navigator.webkitGetUserMedia({video: true}, function(stream) {
                        self.rawStream = stream;
                        if (!self.active)
                            stream.stop();
                        resolve(stream);
                    }, function(e) {
                        reject(e);
                    });
                });
            },
            connectStream: function(stream) {
                var self = this;
                var video = this.$.video;
                video.src = URL.createObjectURL(stream);
                return new Promise(function(resolve, reject) {
                    video.onplay = function() {
                        self.$.video.style.visibility = "";
                        self.videoWidth = video.videoWidth;
                        self.videoHeight = video.videoHeight;
                        resolve(stream);
                    };
                });
            },
            captureFrame: function(context, width, height) {
                var video = this.$.video;
                context.drawImage(video,
                    0, 0, this.videoWidth, this.videoHeight,
                    0, 0, width, height);
            },
        });
    </script>
</polymer-element>
